<template>
  <view class>
    <uni-nav-bar1 title="企业列表（企业云）" fixed leftIcon="arrowleft" statusBar :border="false" color="#fff"></uni-nav-bar1>
    <view class="search-bar flex-center">
      <view class="search-box flex-row-center">
        <input class="input" type="text" placeholder="请输入搜索关键词" @input="onChange" maxlength="30" confirm-type="search" @confirm="onSearch" />
        <view class="search" @click="onSearch">
          <view class="iconfont iconfangdajing"></view>
        </view>
      </view>
    </view>
    <view class="company-item" v-for="(item, index) in curTab.list" :key="index" @click="$util.goUrl(`/pages/companyDetail?id=${item.id}`)">
      <view class="flex-box">
        <image class="img" :src="item.introduceImgUrl" mode="aspectFill" />
        <view class="con flex-item">
          <view class="title ellipsis2">{{ item.title }}</view>
          <view class="time c9">成立于：{{ item.foundTime }}</view>
        </view>
      </view>
      <view class="desc-box flex-row-center">
        <view class="desc ellipsis2">{{ item.simpleIntroduce }}</view>
        <view class="tag">
          <view class="iconfont icongengduo"></view>
        </view>
      </view>
    </view>
    <!-- 加载状态 -->
    <uni-load-more :status="curTab.loadStatus"></uni-load-more>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchText: "",
      curTab: {
        isLoaded: false,
        loadStatus: "loading", // 加载状态
        isEmpty: false, // 是否空白数据
        page: {
          page: 0,
          size: 10,
          finished: false,
        },
        list: [],
      },
    };
  },
  onLoad() {
    this.getList();
  },
  methods: {
    onCancel() {
      this.searchText = "";
      this.getList(true);
    },
    onChange(e) {
      this.searchText = e.target.value;
    },
    onSearch() {
      this.getList(true);
    },
    getList(init) {
      const curTabItem = this.curTab;

      // 初始化
      if (init) {
        curTabItem.page.page = 0;
        curTabItem.list = [];
        curTabItem.page.finished = false;
      }

      if (curTabItem.loading || curTabItem.page.finished) return;
      curTabItem.page.page++;

      const data = {
        current: curTabItem.page.page,
        size: curTabItem.page.size,
        farmName: this.searchText,
      };

      this.$axios({
        url: "farm/list",
        data,
      }).then((res) => {
        this.curTab = {
          isLoaded: true,
          loadStatus: res.current >= res.total ? "noMore" : "loading", // 加载状态
          isEmpty: ![...curTabItem.list, ...res.data].length, // 是否空白数据
          page: {
            ...curTabItem.page,
            finished: res.current >= res.total,
          },
          list: [...curTabItem.list, ...res.data],
        };

        // console.log(this.curTab);
      });
    },
    onReachBottom() {
      console.log("next page");
      this.getList();
    },
  },
};
</script>

<style lang="scss">
.search-bar {
  padding: 20rpx;
  color: #8f9bb3;
  background: #fff;
  .search-box {
    width: 686rpx;
    height: 88rpx;
    padding: 0 20rpx;
    background: #f5f8fd;
    border-radius: 16rpx;
  }
  .search {
    width: 64rpx;
    height: 64rpx;
    text-align: center;
    line-height: 64rpx;
    color: #fff;
    font-size: 30rpx;
    background: linear-gradient(101deg, #43a047 0%, #53aa57 20%, #71bd74 77%, #81c784 100%);
    border-radius: 20rpx;
  }
}
.company-item {
  position: relative;
  width: 700rpx;
  // height: 256rpx;
  padding-top: 20rpx;
  margin: 24rpx auto 0;
  background: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0px 10rpx 20rpx 0px rgba(198, 218, 248, 0.3);
  .img {
    display: block;
    width: 130rpx;
    height: 97.5rpx;
    margin-bottom: 22rpx;
    margin-right: 20rpx;
    margin-left: 20rpx;
    background: #eee;
  }
  .collect {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    z-index: 1;
    width: 64rpx;
    height: 64rpx;
    background: rgba(18, 25, 35, 0.15);
    border-radius: 20rpx;
    font-size: 27rpx;
    color: #fff;
    &.active {
      color: #ff2d55;
    }
  }
  .title {
    height: 92rpx;
    padding-right: 22rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
    line-height: 46rpx;
  }
  .time {
    margin-top: 10rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #aaaaaa;
    line-height: 32rpx;
  }
  .desc-box {
    height: 120rpx;
    padding: 14rpx 14rpx 14rpx 20rpx;
    background: #eef7e5;
    font-size: 26rpx;
    line-height: 36rpx;
    color: #7db744;
  }
  .desc {
    height: 72rpx;
  }
}
</style>
